<template>
  <el-dialog
      v-model="visible"
      :title="dialogTitle"
      width="640px"
      destroy-on-close
      class="dialog"
      @closed="handleClosed"
  >
    <el-form
        :model="formData"
        label-width="120px"
        ref="formRef"
        class="form"
        :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="formData.roleName" placeholder="请输入角色名称"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="角色编码" prop="roleCode">
            <el-input v-model="formData.roleCode" placeholder="请输入角色编码" :readonly="!!formData.roleId"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="数据权限类型" prop="dataType">
            <DictSelect
                v-model="formData.dataType"
                dicTypeCode="data_power_type"
                placeholder="请选择数据权限类型"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {RoleItem} from "@/views/role/role"
import DictSelect from "@/components/DictSelect.vue";

const visible = ref(false)
const dialogTitle = ref('')
const emit = defineEmits(['submit'])
const formRef = ref<FormInstance>()

const formData = ref<RoleItem>({
  roleId:null,
  roleName:"",
  roleCode:"",
  dataType:null
})

const rules: FormRules = {
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 20, message: '角色名称长度在 2-20 个字符', trigger: 'blur' }
  ],
  roleCode: [
    { required: true, message: '请输入角色编码', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9_]+$/, message: '只能包含字母、数字和下划线', trigger: 'blur' }
  ],
  dataType: [
    { required: true, message: '请选择数据权限类型', trigger: 'change' }
  ]
}

const openDialog = ( rowData?: RoleItem) => {
  if (rowData && rowData.roleId) {
    dialogTitle.value = '修改角色'
    formData.value = {...rowData}
  } else {
    dialogTitle.value = '新增角色'
    formData.value = {
      roleId:null,
      roleName:"",
      roleCode:"",
      dataType:null
    }
  }
  visible.value = true
}

const submitForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    emit('submit', formData.value)
    visible.value = false
  } catch (error) {
    console.log('Form validation failed')
  }
}

const handleClosed = () => {
  formRef.value?.clearValidate()
}

defineExpose({openDialog})
</script>

<style scoped>
.dialog {
  border-radius: 12px;
}

.form {
  padding: 10px 10px 0 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
</style>